import React from 'react';
import * as echarts from 'echarts/lib/echarts'
import { guid } from '../../utils/utils';
import styles from './index.less';

class Chart extends React.PureComponent {
  constructor(props) {
    super(props);
    this.delay = props.delay || 10000;
    if( props.id ){
      this.id = props.id ;
    }else{
      this.id = `chart_${guid()}`;
    }

    this.currentIndex = -1;
    window.addEventListener('resize', this.resize);
  }

  componentDidMount() {
    this.myChart = echarts.init(document.getElementById(this.id));
    this.bindEvent(this.props);
    //storageId
  }

  UNSAFE_componentWillReceiveProps(newProps) {
    const {
      option
    } = this.props;
    if (newProps.option !== option && this.myChart) {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.myChart.dispose();
      this.myChart = echarts.init(document.getElementById(this.id));
      this.bindEvent(newProps);
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
    if (this.myChart) {
      this.myChart.dispose();
    }
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  bindEvent(props) {
    const {
      option,
      onChartClick,
      onZoomChange,
      onLegendselectchanged,
      onGeoRoam,
      pieselectchanged,
      onMouseover,
        storage
    } = props;
    if (option) {
      console.log(9999,option)
      this.myChart.setOption(option);
      this.currentIndex = -1;
      const { autoPlay } = props;
      if (autoPlay) {
        this.play();
        this.autoPlay();
        this.myChart.on('mouseover', () => {
          // 取消之前高亮的图形
          this.myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.currentIndex
          });
          this.stop = true;
        });
        this.myChart.on('mouseout', () => {
          this.stop = false;
          this.play();
        });
      }
    }
    if (onChartClick) {
      this.myChart.on('click', onChartClick);
    }
    if (onMouseover) {
      this.myChart.on('mouseover', onMouseover);
    }
    if (onZoomChange) {
      this.myChart.on('datazoom', onZoomChange);
    }

    if (onLegendselectchanged) {
      this.myChart.on('legendselectchanged', (...rest) => {
        const oldOption = this.myChart.getOption();
        const newOption = onLegendselectchanged(rest, oldOption);
        this.myChart.setOption(newOption);
      });
    }
    if (pieselectchanged) {
      this.myChart.on('pieselectchanged', (rest) => {
        const oldOption = this.myChart.getOption();
        pieselectchanged(rest, this.myChart, oldOption);
      });
    }
    if (onGeoRoam) {
      this.myChart.on('georoam', onGeoRoam);
    }

    if( storage ){
       let dom = this.myChart._api.getDom();
      dom.setAttribute('storage',storage);
    }
  }

  resize = () => {
    if (this.myChart) {
      this.myChart.resize();
    }
  }

  autoPlay = () => {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    this.timer = setInterval(() => {
      this.play();
    }, this.delay);
  }

  play = () => {
    if (this.stop) {
      return;
    }
    const dataLen = this.myChart.getOption().series[0].data.length;
    // 取消之前高亮的图形
    this.myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: this.currentIndex
    });
    this.currentIndex = (this.currentIndex + 1) % dataLen;
    // 高亮当前图形
    this.myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: this.currentIndex
    });
    // 显示 tooltip
    this.myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: this.currentIndex
    });
    const { onAutoPlay } = this.props;
    if (onAutoPlay) {
      onAutoPlay(this.currentIndex);
    }
  }

  render() {
    const { autoPlay } = this.props;
    return (
      <div
        id={this.id}
        className={autoPlay ? styles.container : ''}
        style={{
          height: '100%'
        }}
      />
    );
  }
}

export default Chart;
